<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {productPageList, userInfoService, productPageListWithSort, addToCart} from '@/api/user'
import router from "@/router";
import {useUserInfoStore} from "@/stores/userInfo"; // 如果不是 user 模块，请改成 '@/api/product'

const products = ref([])
const loading = ref(false)
const searchQuery = ref('')
const sortOption = ref('default')
const activeCategory = ref(0)
// 查询参数（分页 + 搜索）
const productQuery = ref({
  name: '',
  price: null,
  origin: null,
  pageNo: 1,
  pageSize: 8,
  orderBy: '',
  sort: '',
  pointsMall: null,
  groupBuy: null,
  discountRate: null,
  pointsPrice:0
})
// 独立 total 状态
const total = ref(0)

watch(sortOption, (newVal) => {
  productQuery.value.pageNo = 1 // 重置到第一页
  fetchProducts()
})

const fetchProducts = async () => {
  loading.value = true
  productQuery.value.name = searchQuery.value || ''

  // 清空所有筛选条件
  productQuery.value.pointsMall = null
  productQuery.value.groupBuy = null
  productQuery.value.discountRate = null

// 按当前 tab 设置筛选条件
  switch (activeTab.value) {
    case 'pointsMall':
      productQuery.value.pointsMall = true
      break
    case 'groupBuy':
      productQuery.value.groupBuy = true
      break
    case 'discount':
      productQuery.value.discountRate = 1 // 后端 interpret as discountRate < 1
      break
    default:
      // 首页 tab：不加任何额外条件
      break
  }

  // 设置排序字段
  switch (sortOption.value) {
    case 'price-asc':
      productQuery.value.orderBy = activeTab.value === 'pointsMall' ? 'points_price' : 'price'
      productQuery.value.sort = 'asc'
      break
    case 'price-desc':
      productQuery.value.orderBy = activeTab.value === 'pointsMall' ? 'points_price' : 'price'
      productQuery.value.sort = 'desc'
      break
    case 'sales':
      productQuery.value.orderBy = 'sales'
      productQuery.value.sort = 'desc'
      break
    case 'newest':
      productQuery.value.orderBy = 'create_time'
      productQuery.value.sort = 'desc'
      break
    default:
      productQuery.value.orderBy = ''
      productQuery.value.sort = ''
  }

  try {
    const res = await productPageListWithSort(productQuery.value)
    products.value = res.data.records
    total.value = res.data.total || 0
    updateTotalToCategories()
  } catch (err) {
    ElMessage.error('商品加载失败')
  } finally {
    loading.value = false
  }
}

const updateTotalToCategories = () => {
  categories.value[0].count = total.value
}

const categories = ref([
  { name: '全部商品', count: productQuery.value.total },
  { name: '大会员套餐', count: 24 },
  { name: 'B站周边', count: 36 },
  { name: '数码产品', count: 18 },
  { name: '游戏道具', count: 15 },
  { name: '动漫手办', count: 42 },
  { name: '限时特惠', count: 32 }
])

const pageNoChange = (value) => {
  productQuery.value.pageNo = value
  fetchProducts()
}

const pageSizeChange = (value) => {
  productQuery.value.pageSize = value
  fetchProducts()
}

// 页面加载时自动调用
onMounted(() => {
  fetchProducts()
})

const filteredProducts = computed(() => {
  let result = [...products.value]

  return result
})


const userInfoStore = useUserInfoStore();
const getUserInfo = ()=>{
  userInfoService ().then(res=>{
    if (res.data){
      //登陆过
      userInfoStore.setUserInfo(res.data)
    }else {
      ElMessage({
        message: '尚未登录，请先登录',
        type: 'warning',
      })
      router.push({path:"/login"})
    }
  })
}
getUserInfo()

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm(
        '你确认要退出吗？',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(async () => {
      userInfoStore.removeUserInfo() // ✅ 清空登录状态
      ElMessage.success("退出成功")
      await router.push('/login') // ✅ 跳转到登录页
    })
  } else {
    router.push('/' + command)
  }
}

const navTabs = ref([
  { label: '首页', key: 'home', title: '为你推荐商品' },
  { label: '积分商城', key: 'pointsMall', title: '积分兑换专区' },
  { label: '团购商品', key: 'groupBuy', title: '超值团购商品' },
  { label: '限时特惠', key: 'discount', title: '限时折扣商品' }
])

const activeTab = ref('home') // 默认首页

const handleTabClick = (tabKey) => {
  if (activeTab.value !== tabKey) {
    activeTab.value = tabKey
    productQuery.value.pageNo = 1 // 切换 tab 时重置分页
    fetchProducts()
  }
}

const currentTitle = computed(() => {
  const current = navTabs.value.find(tab => tab.key === activeTab.value)
  return current ? current.title : ''
})

const viewDetails = (id) => {
  router.push(`/shopping/product/${id}`)
}

const userDiscountRate = computed(() => {
  return userInfoStore.userInfo?.discountRate ?? 1
})

const pointsMultiplier = computed(() => {
  return userInfoStore.userInfo?.pointsMultiplier ?? 0
})

/**
 * 获取展示价格
 */
const getFinalPrice = (product) => {
  const basePrice = product.price
  const productDiscountedPrice = product.discountRate < 1 ? basePrice * product.discountRate : basePrice
  const memberDiscountedPrice = productDiscountedPrice * userDiscountRate.value
  return memberDiscountedPrice.toFixed(2)
}

const getPointsReturn = (product) => {
  const finalPrice = parseFloat(getFinalPrice(product))
  return (finalPrice * 0.1 * pointsMultiplier.value).toFixed(1)
}

const addToCartDialog = ref(false)
const currentProduct = ref(null)
const quantity = ref(1)

// 添加购物车方法
const showAddToCartDialog = (product) => {
  currentProduct.value = product
  quantity.value = 1
  addToCartDialog.value = true
}

const handleAddToCart = async (product) => {
  try {
    const res = await addToCart(product.id, quantity.value) // 直接传递两个参数
    if (res.status === true) {
      ElMessage.success('添加购物车成功')
      addToCartDialog.value = false
    } else {
      ElMessage.error(res.message || '添加失败')
    }
  } catch (error) {
    ElMessage.error('请求出错：' + (error.response?.data?.message || error.message))
  }
}

const handleAddToCartWithStockCheck = async (product) => {
  if (product.inventory <= 0) {
    try {
      await ElMessageBox.confirm(
          '该商品已售罄，是否仍要加入购物车？(加入后可关注补货通知)',
          '商品已售罄',
          {
            confirmButtonText: '仍要加入',
            cancelButtonText: '取消',
            type: 'warning'
          }
      )
      // 用户确认仍要加入
      await showAddToCartDialog(product)
    } catch {
      // 用户取消操作
      return
    }
  } else {
    // 正常加入购物车
    await showAddToCartDialog(product)
  }
}

onMounted(() => {
  userInfoStore.fetchUserInfo()
})

</script>

<template>
  <div class="shopping-container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="logo">
        <i class="fab fa-bilibili"></i>
        <span>哩哔哩哔商城</span>
      </div>

      <div class="nav-links">
        <a
            v-for="item in navTabs"
            :key="item.key"
            href="#"
            :class="{ active: activeTab === item.key }"
            @click.prevent="handleTabClick(item.key)"
        >
          {{ item.label }}
        </a>
      </div>

      <div class="user-actions">
        <div class="cart-icon">
          <i class="fas fa-shopping-cart fa-lg"></i>
        </div>
        <div class="welcome-text">
          当前用户：<strong>{{ userInfoStore.userInfo?.username || '未登录' }}</strong>
        </div>
        <el-button @click="handleCommand('logout')" type="primary" size="default" round>
          <i class="fas fa-user"></i> 注销
        </el-button>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header">
      <div class="welcome">
        <h2>欢迎来到哩哔哩哔商城</h2>
        <p>大会员专享特权商品，畅享多彩世界！海量精选商品，超值优惠，一键直达！</p>
      </div>
      <div class="search-container">
        <el-input
            v-model="searchQuery"
            placeholder="请输入商品名称进行搜索，回车显示结果"
            class="search-bar"
            size="large"
            @keyup.enter="fetchProducts"
        >
        <template #append>
          <el-button type="primary" @click="fetchProducts">
            <i class="fas fa-search"></i> 搜索
          </el-button>
        </template>
        </el-input>
      </div>
    </div>

    <!-- 主体区域 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-title">
          <i class="fas fa-user-circle"></i> 用户中心
        </div>
        <el-menu
            default-active="/"
            class="el-menu-vertical"
            router
        >
          <!-- 使用路由路径绑定 -->
          <el-menu-item @click="handleCommand('home')">
            <i class="fas fa-home"></i> 我的主页
          </el-menu-item>
          <el-menu-item @click="handleCommand('orders')">
            <i class="fas fa-file-invoice-dollar"></i> 我的订单
          </el-menu-item>
          <el-menu-item @click="handleCommand('cart')">
            <i class="fas fa-heart"></i> 我的购物车
          </el-menu-item>
          <el-menu-item @click="handleCommand('address')">
            <i class="fas fa-address"></i> 地址管理
          </el-menu-item>
          <el-menu-item @click="handleCommand('settings')">
            <i class="fas fa-cog"></i> 账户设置
          </el-menu-item>
          <el-menu-item @click="handleCommand('logout')">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </el-menu-item>
        </el-menu>

        <!-- 核心修复：路由视图容器 -->
        <main class="content-area">
          <router-view></router-view>
        </main>
        <div class="category-section">
          <div class="sidebar-title">
            <i class="fas fa-list"></i> 商品分类
          </div>
          <div class="category-list">
            <div
                v-for="(category, index) in categories"
                :key="index"
                class="category-item"
                :class="{ active: activeCategory === index }"
                @click="activeCategory = index"
            >
              <span>{{ category.name }}</span>
              <span class="category-count">{{ category.count }}</span>
            </div>
          </div>
        </div>
      </aside>

      <!-- 商品展示区 -->
      <section class="product-section" >
        <router-view />
        <div class="section-header">
          <h2 class="section-title">{{ currentTitle }}</h2>
          <div class="sort-options">
            <span class="sort-label">排序：</span>
            <el-select
                v-model="sortOption"
                placeholder="默认排序"
                size="small"
                class="sort-select"
            >
              <el-option label="默认排序" value="default" />
              <el-option label="价格从低到高" value="price-asc" />
              <el-option label="价格从高到低" value="price-desc" />
              <el-option label="最新上架" value="newest" />
            </el-select>

          </div>
        </div>

        <div class="product-grid">
          <div
              v-for="product in filteredProducts"
              :key="product.id"
              class="product-card"
              :class="{ 'out-of-stock': product.inventory <= 0 }"
          >
            <!-- 库存为0的标记 -->
            <div v-if="product.inventory <= 0" class="sold-out-badge">已售罄</div>

            <div class="product-badge">限时特惠</div>
            <!-- 折扣角标 -->
            <div v-if="product.discountRate < 1" class="discount-badge">
              {{ Math.floor(product.discountRate * 100) }}折惊爆价
            </div>

            <div class="product-image-container">
              <img @click="viewDetails(product.id)" :src="product.mainImage" class="product-image" alt="商品图片" />
            </div>

            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>

              <div v-if="activeTab === 'pointsMall'" class="product-price">{{ product.pointsPrice }} 积分</div>
              <div v-else class="product-price">
                <!-- 原价展示 -->
                <div v-if="product.discountRate < 1">
                  <span class="original-price">{{ product.price }} 元</span>
                  <span class="discounted-price">{{ (product.price * product.discountRate).toFixed(2) }} 元</span>
                </div>
                <div v-else>
                  <span class="normal-price">{{ product.price }} 元</span>
                </div>

                <!-- 会员折扣展示（仅当用户折扣率 < 1） -->
                <div v-if="userDiscountRate < 1">
                  <span class="member-price">会员专享价：<strong>{{ getFinalPrice(product) }} 元</strong></span>
                  <div class="member-tag">💎 {{ Math.floor(userDiscountRate * 100) }}折会员</div>
                </div>

                <!-- 积分返还展示（仅非积分商城页） -->
                <div v-if="activeTab !== 'pointsMall' && pointsMultiplier > 0">
                  <span class="points-return">返还积分：{{ getPointsReturn(product) }} 积分</span>
                </div>
              </div>

              <div class="product-actions">
                <button
                    class="add-to-cart"
                    @click="handleAddToCartWithStockCheck(product)"
                    :disabled="product.inventory <= 0"
                >
                  {{ product.inventory <= 0 ? '已售罄' : '加入购物车' }}
                </button>
                <button class="view-details" @click="viewDetails(product.id)">详情</button>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
            v-model:current-page="productQuery.pageNo"
            v-model:page-size="productQuery.pageSize"
            :page-sizes="[4, 8, 12, 9999]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="pageNoChange"
        />
      </section>
    </div>
  </div>
  <el-dialog
      v-model="addToCartDialog"
      title="添加到购物车"
      width="500px"
  >
    <div v-if="currentProduct" class="cart-dialog-content">
      <div class="product-info">
        <img :src="currentProduct.mainImage" class="product-image" />
        <div class="product-details">
          <h4>{{ currentProduct.name }}</h4>
          <div v-if="currentProduct.discountRate < 1">
            <span class="original-price">{{ currentProduct.price }} 元</span>
            <span class="discounted-price">{{ (currentProduct.price * currentProduct.discountRate).toFixed(2) }} 元</span>
          </div>
          <div v-else>
            <span class="normal-price">{{ currentProduct.price }} 元</span>
          </div>

          <!-- 会员折扣展示（仅当用户折扣率 < 1） -->
          <div v-if="userDiscountRate < 1">
            <span class="member-price">会员专享价：<strong>{{ getFinalPrice(currentProduct) }} 元</strong></span>
            <div class="member-tag">💎 {{ Math.floor(userDiscountRate * 100) }}折会员</div>
          </div>

          <!-- 积分返还展示（仅非积分商城页） -->
          <div v-if="activeTab !== 'pointsMall' && pointsMultiplier > 0">
            <span class="points-return">返还积分：{{ getPointsReturn(currentProduct) }} 积分</span>
          </div>
        </div>
      </div>

      <el-form label-width="80px">
        <el-form-item label="购买数量">
          <el-input-number
              v-model="quantity"
              :min="1"
              :max="999"
              controls-position="right"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="addToCartDialog = false">取消</el-button>
      <el-button type="primary" @click="handleAddToCart(currentProduct)">确定</el-button>
    </template>
  </el-dialog>
</template>

<style >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

:root {
  --primary-color: #fb7299;
  --primary-light: #ffc2d1;
  --secondary-color: #00a1d6;
  --dark-color: #2c3e50;
  --light-color: #f5f7fa;
  --gray-color: #e4e7ed;
  --text-dark: #333;
  --text-light: #666;
  --border-radius: 8px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s ease;
}

body {
  background-color: #f8f9fa;
  color: var(--text-dark);
  line-height: 1.6;
}

.shopping-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gray-color);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.logo i {
  font-size: 28px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: 0.3s;
  position: relative; /* 🔺 让 ::after 定位生效 */
}

/* 鼠标悬停 */
.nav-links a:hover {
  background-color: lightblue;
  color: var(--primary-color);
}

/* 激活项样式 */
.nav-links a.active {
  color: var(--primary-color);
  color: lightskyblue;
  font-weight: 800 ;  /* 🔺 使用具体数值更稳定 */
}

/* 底部小横线 */
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: deeppink;
  border-radius: 2px;
}


.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cart-icon {
  position: relative;
  cursor: pointer;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* 头部区域 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 25px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: var(--primary-light);
  border-radius: 50%;
  opacity: 0.2;
}

.header::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: 100px;
  width: 150px;
  height: 150px;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0.1;
}

.welcome h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.welcome p {
  color: var(--text-light);
  max-width: 500px;
}

.search-container {
  position: relative;
  width: 350px;
}

.search-bar {
  border-radius: 50px;
  box-shadow: var(--shadow);
}

.search-container i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  z-index: 2;
}

/* 主体内容 */
.main-content {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
}

/* 侧边栏 */
.sidebar {
  width: 260px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px 0;
  flex-shrink: 0;
  height: fit-content;
}

.sidebar-title {
  padding: 0 20px 15px;
  font-size: 18px;
  font-weight: bold;
  color: var(--dark-color);
  border-bottom: 1px solid var(--gray-color);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-menu {
  border-right: none !important;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.el-menu-item i {
  margin-right: 10px;
  font-size: 18px;
}

.el-menu-item:hover, .el-menu-item.is-active {
  color: var(--primary-color);
  background-color: rgba(251, 114, 153, 0.1);
}

.el-menu-item.is-active {
  font-weight: 500;
}

.category-section {
  margin-top: 25px;
}

.category-list {
  padding: 0 15px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.category-item:hover {
  background-color: var(--light-color);
  color: var(--primary-color);
}

.category-item.active {
  background-color: rgba(251, 114, 153, 0.1);
  color: var(--primary-color);
  font-weight: 500;
}

.category-count {
  background-color: var(--gray-color);
  color: var(--text-light);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
}

/* 商品区域 */
.product-section {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--dark-color);
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 22px;
  background-color: var(--primary-color);
  border-radius: 3px;
}

.sort-options {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: nowrap; /* ✅ 避免自动换行 */
}

.sort-label {
  color: var(--text-light);
  font-size: 14px;
  white-space: nowrap;
}

.sort-select {
  min-width: 160px; /* ✅ 添加宽度 */
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
}

.product-card {
  position: relative;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--primary-color);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}

.product-image-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.product-actions {
  display: flex;
  justify-content: space-between;
}

.add-to-cart {
  flex: 1;
  background-color: #fb7299;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: bold;
  font-size: 14px; /* ✅ 字体大小设为正常值 */
  cursor: pointer;
  display: flex; /* ✅ 加上 Flex */
  align-items: center;
  justify-content: center;
  gap: 6px; /* 图标和文字间距 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease;
}


.add-to-cart:hover {
  background-color: #e65a82; /* 鼠标悬停时变深 */
}

.view-details {
  background-color: lightskyblue;
  border: 1px solid #e4e7ed;
  color: #333;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 10px;
  font-weight: 500;
}

.view-details:hover {
  border-color: #fb7299;
  color: #fb7299;
}

/* 底部推荐 */
.recommend-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--gray-color);
}

/* 页脚 */
.footer {
  text-align: center;
  padding: 30px 0;
  color: var(--text-light);
  font-size: 14px;
  border-top: 1px solid var(--gray-color);
  margin-top: 50px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 15px;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .welcome p {
    max-width: 100%;
  }

  .search-container {
    width: 100%;
  }

  .nav-links {
    display: none;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .sort-options {
    width: 100%;
    justify-content: space-between;
  }
}

.welcome-text {
  font-size: 1.2rem;
  color: deeppink;
  margin-bottom: 5px;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  margin-right: 8px;
  font-size: 14px;
}

.discounted-price {
  color: var(--primary-color);
  font-weight: 600;
}

.discount-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transform: rotate(-8deg);
  z-index: 10;
}
.member-price {
  color: #d81e06;
  font-weight: bold;
  margin-top: 4px;
}

.member-tag {
  background-color: #ffe4e1;
  color: #c00;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}

.points-return {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

.cart-dialog-content {
  .product-info {
    display: flex;
    margin-bottom: 20px;

    .product-image {
      width: 120px;
      height: 120px;
      object-fit: cover;
      margin-right: 20px;
      border-radius: 4px;
    }

    .product-details {
      flex: 1;

      h4 {
        margin: 0 0 10px 0;
        font-size: 16px;
      }

      .price {
        color: #f56c6c;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
/* 已售罄商品卡片样式 */
.product-card.out-of-stock {
  opacity: 0.8;
  position: relative;
}

/* 已售罄标记 */
.sold-out-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f56c6c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 2;
}

/* 禁用状态的按钮样式 */
.add-to-cart:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 商品图片的售罄遮罩 */
.product-card.out-of-stock .product-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1);
}

</style>
